<template>
	<view class="page">
		<!-- 选择反馈类型 -->
		<!-- <view class="feedback-type">
			<view class="title">
				<text>{{TypeArray[TypeIndex]}}</text>
			</view>
			<view class="picker">
				<picker @change="FeedbackTypeCh" :value="TypeIndex" :range="TypeArray">
						<view class="uni-input">{{TypeArray[TypeIndex]}}</view>
				</picker>
			</view>
			<view class="more">
				<text class="iconfont icon-more1"></text>
			</view>
		</view> -->
		<!-- 反馈内容 -->
		<view class="feedback-data">
			<view class="content">
				<textarea value="" v-model="content" placeholder="请输入投诉的内容" />
			</view>
			<view class="voucher-img flex-line">
				<view class="list">
					<image src="/static/voucher_bg.png" @click="upload"></image>
				</view>
				<view class="list" v-for="(item,index) in images" :key="index">
					<view class="close" @click="cleares(index)">
						<tui-icon name="close" :size="20" color="#333"></tui-icon>
					</view>
					<image :src="item"></image>
				</view>
			</view>
		</view>
		<!-- 联系方式 -->
		<view class="contact-way">
			<input type="number" placeholder="手机号" v-model="phone">
		</view>
		<!-- 提交 -->
		<view class="submit-btn" @click="sebMite">
			<text>提交</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				TypeArray: ['商品相关', '物流状况', '客户服务', '优惠活动','产品体验','产品功能','其他问题'],
				TypeIndex: 0,
				content:'',
				phone:'',
				images:[]
			};
		},
		methods:{
			/**
			 * 反馈类型
			 * @param {Object} val
			 */
			FeedbackTypeCh(val){
				console.log(val);
				this.TypeIndex = val.detail.value;
			},
			upload(){
				let that = this
				if(that.images.length>=3){
					that.tui.toast("最多上传三张图片")
					return
				}
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: res => {
						// that.headerimg = res.tempFilePaths[0];
						let tempFilePaths = res.tempFilePaths[0];
						that.tui.uploadFile("api.data/upload",tempFilePaths).then((res) => {
							if(res.code==1){
								that.images.push(res.data.url)
							}
							
						}).catch((res) => {})
					}
				});
			},
			cleares(e){
				this.images =this.images.slice(0, e).concat(this.images.slice(e + 1)) 
			},
			sebMite(){
				let that = this
				let images =''
				if(that.images.length!=0){
					that.images.map((item,index)=>{
						images = images+item+','
					})
				}
				that.tui.request("api.auth.live/complain", "POST", {content:that.content,image:images,phone:that.phone}, false, false, true).then((res) => {
					that.tui.toast(res.info)
					if(res.code==1){
						setTimeout(function(){
							uni.navigateBack()
						},2000)
					}
				}).catch((res) => {
					
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'Feedback.scss';
</style>
